<template>
  <div class="evaluate">
    <van-nav-bar title="评价" left-text="返回" left-arrow right-text="评价" @click-right="onClickRight"
      @click-left="handleBack" />
    <div class="detail">
      <div class="text">您对商家/菜品满意吗？</div>
      <div class="item">
        <div class="label">总体</div>
        <van-rate v-model="evaluateInfo.all" />
      </div>
      <div class="item">
        <div class="label">口味</div>
        <van-rate v-model="evaluateInfo.taste" />
      </div>
      <div class="item">
        <div class="label">包装</div>
        <van-rate v-model="evaluateInfo.package" />
      </div>
      <div class="desc">
        <van-field v-model="evaluateInfo.desc" rows="5" autosize type="textarea" placeholder="对口味、包装不满意？可描述问题，帮助商家改善" />
      </div>
    </div>
  </div>
</template>

<script>
import { addEvaluate } from "@/api/reception";
export default {
  data() {
    return {
      evaluateInfo: {
        all: 0,
        taste: 0,
        package: 0,
        desc: "",
      },
      info: {}
    };
  },

  mounted() {
    console.log(this.$route.query.info, "aaa");
    this.info = this.$route.query.info;
  },

  methods: {
    async onClickRight() {
      console.log(this.evaluateInfo);
      if (this.evaluateInfo.all == 0) {
        this.$message.error("请填写总体！");
        return;
      } else if (this.evaluateInfo.taste == 0) {
        this.$message.error("请填写口味！");
        return;
      } else if (this.evaluateInfo.package == 0) {
        this.$message.error("请填写包装！");
        return;
      } else if (!this.evaluateInfo.desc) {
        this.$message.error("请填写评价！");
        return;
      }
      let data = {
        orderId: this.info.id,
        comment:this.evaluateInfo.desc,
        score:this.evaluateInfo.all,
        tasteScore:this.evaluateInfo.taste,
        packageScore:this.evaluateInfo.package
      };
      this.$router.back();

      const res = await addEvaluate(data);
      if (res.code == 200) {
        this.$message.success("评价成功！");
        this.$router.back();
      }
    },
    handleBack() {
      this.$router.back();
    },
  },
};
</script>

<style lang="less" scoped>
.evaluate {
  height: 100%;
  background-color: #f5f5f5;
  padding: 0 10px;

  .detail {
    margin-top: 15px;
    border-radius: 10px;
    background-color: #fff;

    .text {
      height: 40px;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
      padding-left: 15px;
    }

    .item {
      display: flex;
      align-items: center;
      padding-left: 15px;
      height: 40px;

      .label {
        margin-right: 8px;
      }
    }

    .van-cell {
      ::v-deep {
        .van-field__body {
          background-color: #f5f5f5;
        }
      }
    }
  }
}
</style>
